<template>
  <div>
    <div class="d1">{{ list.product_name }}</div>
    <div class="boc">
      <div class="do1">
        <img :src="list.product_picture" alt="" />
      </div>
      <div class="do2">
        <div class="dg1">
          <p class="p1">{{ list.product_name }}</p>
          <p class="p2">{{ list.product_intro }}</p>
          <p class="">极端主义</p>
          <p class="p3">{{ list.product_price }}元</p>
        </div>

        <div class="dfd">
          <div class="ps">
            <p class="pb">{{ list.product_name }}</p>
            <p>总价{{ list.product_price }}元</p>
          </div>

          <div class="ps2">
            <p>
              <el-button type="warning" @click="gox(list)"
                >加入购物车</el-button
              >
            </p>
            <p><el-button type="info" @click="xh">我喜欢</el-button></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [],
    };
  },
  mounted() {
    this.list = JSON.parse(sessionStorage.getItem("item"));
    this.hq();
  },
  methods: {
    hq() {
      //   通过本地储存进行详情传参
      console.log(this.list);
    },
    gox(a) {
      //加入购物车
      this.$axios
        .post("api/user/shoppingCart/addShoppingCart", {
          user_id:sessionStorage.getItem('token'),
          product_id: a.product_id,
        })
        .then((a) => {
          let { code, msg } = a;
          if (code == "001") {
            this.$message.success(msg);
          }
          if (code != "001") {
            this.$message(msg);
            console.log(" 无敌");
          }
        });
    },
    xh() {
      this.$axios
        .post("api/user/collect/addCollect", {
          user_id: sessionStorage.getItem('token'),
          product_id: this.list.product_id,
        })
        .then((a) => {
          let { code, msg } = a;
          if (code == "001") {
            this.$message.success(msg);
          }
          if (code != "001") {
            this.$message(msg);
            console.log(" 无敌");
          }
        });
    },
    
  },
};
</script>
<style scoped>
.d1 {
  text-align: left;
  line-height: 60px;
  width: 100%;
  font-size: 17px;
  height: 60px;
  box-shadow: 2px 2px 2px 2px #f0f0f0;
}
div {
  text-align: center;
}
.boc {
  width: 100%;
  display: flex;
  height: 560px;
  flex-wrap: wrap;
}
.boc div {
  height: 100%;
}
.boc .do2 div {
  height: 50%;
}
.do1 {
  width: 40%;
}
.do2 {
  width: 60%;
}

img {
  width: 90%;
  margin-top: 15%;
}
.boc .do2 .dg1 {
  height: 32%;
  border-bottom: #000 1px solid;
}

.p1 {
  margin-top: 9%;
  font-size: 25px;
  text-align: left;
}
.p2 {
  color: #c0c0c0;
}
.p3 {
  margin-top: 3%;
  text-align: left;

  color: orangered;
}
.ps {
  width: 100%;
  background: #f5f4f6;
  margin-top: 6%;
  height: 40%;
}
.ps1 {
  margin-top: 4%;
}
.ps p {
  font-size: 25px;
  color: orangered;
  text-align: left;
}
.ps .pb {
  font-size: 15px;
  color: #000;
}
.ps2 p {
  display: inline-block;
  width: 50%;
}
</style>